<div class="login_box">
  <!--
    需要一个文本框

    el-row, 就是 element-ui 提供的一个无意义文本框
      等价于 div
   -->
   <el-row class="login">
     <div class="avatar">
     </div>
     <!--
       已经把表单关联了 info 数据
      -->
    <el-form :model="info" :rules="loginRules" ref="login" label-width="100px" class="login-ruleForm">
      <el-form-item label="用户名" prop="username">
        <!-- 关联 info 内的 username -->
        <el-input v-model="info.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <!-- 关联 info 内的 password  -->
        <el-input type="text" v-model="info.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitHandler">登录</el-button>
        <el-button @click="resetHandler">重置</el-button>
      </el-form-item>
    </el-form>
   </el-row>
</div>